// 实现这个项目的构建任务


const { src, dest, series, parallel, watch } = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const del = require('del');
const browserSync = require('browser-sync');

const plugins = loadPlugins();

//默认配置
let config = {
    build: {
        // base
        src: 'src',
        temp: 'temp',
        dist: 'dist',
        public: 'public',

        paths: {
            pages: '*.html',
            styles: 'assets/styles/*.scss',
            scripts: 'assets/scripts/*.js',
            images: 'assets/images/**',
            fonts: 'assets/fonts/**',
        }
    }
}
const cwd = process.cwd();
try {
    const loadConfig = require(`${cwd}/pages.config.js`);
    config = Object.assign({}, config, loadConfig);
} catch (e) { }


const page = () => {
    return src(config.build.paths.pages, { base: config.build.src, cwd: config.build.src })
        .pipe(plugins.swig({ defaults: { cache: false }, data: config.data }))
        .pipe(dest(config.build.temp));
}

const style = () => {
    return src(config.build.paths.styles, { base: config.build.src, cwd: config.build.src })
        .pipe((plugins.sass(require('sass')))({ outputStyle: 'expanded' }))
        .pipe(dest(config.build.temp));
}

const script = () => {
    return src(config.build.paths.scripts, { base: config.build.src, cwd: config.build.src })
        .pipe(plugins.babel({ presets: [require('@babel/preset-env')] }))
        .pipe(dest(config.build.temp));
}

const image = () => {
    return src(config.build.paths.images, { base: config.build.src, cwd: config.build.src })
        .pipe(plugins.imagemin())
        .pipe(dest(config.build.dist));
}

const font = () => {
    return src(config.build.paths.fonts, { base: config.build.src, cwd: config.build.src })
        .pipe(plugins.imagemin())
        .pipe(dest(config.build.dist));
}

// 处理其他的文件: public
const extra = () => {
    return src('**', { base: config.build.public, cwd: config.build.public })
        .pipe(dest(config.build.dist))
}

// 引用文件的处理
const useref = () => {
    return src(config.build.paths.pages, { base: config.build.temp, cwd: config.build.temp })
        .pipe(plugins.useref({ searchPath: [config.build.temp, '.'] }))
        // .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
        // .pipe(plugins.if(/\.html$/, plugins.htmlmin({
        //     removeComments: true, //清除HTML注释
        //     collapseWhitespace: true, //压缩HTML
        //     minifyJS: true, //压缩页面JS
        //     minifyCSS: true, //压缩页面CSS
        //     // collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        //     // removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        //     // removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        //     // removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"

        // })))
        // .pipe(plugins.if(/\.js$/, plugins.uglify()))
        .pipe(dest(config.build.dist))
}

// 文件清除
const clean = () => {
    return del([config.build.dist, config.build.temp]);
}

// 开发服务器
const bs = browserSync.create();
const serve = () => {
    watch(config.build.paths.pages, { cwd: config.build.src }, page),
    watch(config.build.paths.styles, { cwd: config.build.src }, style),
    watch(config.build.paths.scripts, { cwd: config.build.src }, script),

    watch([config.build.paths.images, config.build.paths.fonts], { cwd: config.build.src }, bs.reload),
    watch('**', { cwd: config.build.public }, bs.reload),
    
    bs.init({
        notify: false,
        port: 8080,
        files: config.build.temp + '/**',
        server: {
            baseDir: [config.build.temp, config.build.src, config.build.public],
            // 引用文件glob
            routes: { '/node_modules': 'node_modules' },
        }
    })
}

// 组合任务
const compile = parallel(page, style, script);

const build = series(clean, parallel(series(compile, useref), image, font, extra));

const develop = series(clean, compile, serve);

// 导出gulp任务
module.exports = {
    compile,
    build,
    develop,
}